<template>
    <div class="pd-30">
        <div class="flex">
            <div class="flex flex-1 pr-380">
            </div>
            <!-- <el-button class="w-100" type="primary" @click="dialogVisible = true">新增</el-button> -->

        </div>
        <div class="h-30"></div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="title" label="标题">
            </el-table-column>
            <el-table-column prop="keyWrod" label="关键字">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                    <p v-if="row.status == 1">上线</p>
                    <p v-else class="red">下线</p>
                </template>
            </el-table-column>
            <el-table-column prop="states" label="类型">
                <template #default="{ row }">
                    <p v-if="row.type == 1">文本</p>
                    <p v-else>富文本</p>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="flex mt-20">
            <div></div>
            <el-pagination :current-page="page" background layout="prev, pager, next" :total="total"
                @current-change="sizeChange">
            </el-pagination>
        </div>


        <el-dialog :visible.sync="dialogVisible"  :show-close="false">
            <span slot="title" class="dialog-footer">
                <h4 class="text-center">{{ type == 1 ? '增加' : '编辑' }}分销</h4>
            </span>
            <div class="plr-30">
                <div class="flex_l mt-20">
                    <div class="w-100">标题：</div>
                    <el-input class="w-350 ml-20" :disabled="true" v-model="form.title" placeholder="请输入"></el-input>
                </div>


                <div class="flex_l mt-20">
                    <div class="w-100">关键字：</div>
                    <el-input class="w-350 ml-20" :disabled="true" v-model="form.keyWrod" placeholder="请输入"></el-input>
                </div>

                <div class="flex_l mt-20">
                    <div class="w-100">类型：</div>
                    <div class="ml-20">
                        <el-radio v-model="form.type" label="1">文本</el-radio>
                        <el-radio v-model="form.type" label="2">富文本</el-radio>
                    </div>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">内容：</div>
                    <el-input type="textarea" v-if="form.type == 1" class="w100 h-200 ml-20" size="medium" placeholder="请输入内容" v-model="form.content"></el-input>
                    <rich-text class="flex-1 ml-20" v-else  ref="fueditModule" @loadingCompleted="loadingCompleted"></rich-text>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">状态：</div>
                    <div class="ml-20">
                        <el-radio v-model="form.status" label="1">上线</el-radio>
                        <el-radio v-model="form.status" label="0">下线</el-radio>
                    </div>
                </div>
            </div>



            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { xieYiList,editDic  } from '@/api/configure'
import RichText from '@/components/RichText/RichText.vue'
export default {
    name: "Agreement",
    data() {
        return {
            dialogVisible: false,
            tableData: [],
            dialogImageUrl: '',
            page: 1,
            total: 0,
            form: {
                content: '',
                id: '',
                keyWrod: '',
                status: '',
                title: '',
                type: ''
            },
            type: 1,
        }
    },
    components: {
        RichText
    },
    mounted() {
        this.init()
    },
    methods: {
        loadingCompleted() {
            try {
                console.log('editor加载完成，回调父组件');
                // this.details = this.$refs.fueditModule.setHtml('<p><b>招商会详情！！</b></p>');
            } catch (error) {
                console.log('打开弹窗 err =', error);
            }
        },
        submitFun(e) {
            console.log(e)
        },
        sizeChange(e) {
            this.page = e
            this.init()
        },
        submit() {
            if(this.form.type == 2){
                this.form.content = this.$refs.fueditModule.getHtml();
            }
            if(this.form.content == '') return this.$message({
                message: '请输入内容',
                type: 'warning'
            });
            editDic(this.form).then(res => {
                this.dialogVisible = false
                this.init()
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
            })
        },
        init() {
            xieYiList({
                pageNum: this.page,
                pageSize: 10,
            }).then(res => {
                this.tableData = res.rows
                this.total = res.total
            })
        },
        handleEdit(e, type) {
            for (var i in this.form) {
                this.form[i] = type[i]
            }
            this.dialogVisible = true
            if(type.type == 2){
                setTimeout(res=>{
                    this.$refs.fueditModule.setHtml(type.content);
                },100)
            }
        },
        handleDelete(e, type) {
            console.log(e, type)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
}
</script>